.sidebar{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  header{
    height: 40px;
    width: 100%;
    line-height: 40px;
    position: relative;
    .header_wrap {
      background-color: #009FAB;
      display: flex;
      justify-content: flex-end;
      .user_info{
        width: 120px;
        font-size: 14px;
        height: 100%;
        color: white;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        &:hover{
          background-color: #1ebfcc;
          transition: all 0.2s ease-in-out;
        }
      }
    }
    .user_info_detail{
      position: absolute;
      top:40px;
      right: 0;
      width: 180px;
      height: 160px;
      background-color: #54bbbb;
      text-align: center;
      .img_wrap{
        width: 60px;
        height: 60px;
        border-radius: 100%;
        overflow: hidden;
        margin: 10px auto;
        img{
          width: 100%;
        }
      }
      .time_wrap{
        font-size: 14px;
        color: #ffffff;
        line-height: 30px!important;
      }
      .logout_btn {
        button{
          width: 100px;
          background-color: #12959e;
          border: none;
        }
      }
    }
  }
  footer{
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    height: 40px;
    background-color: #CCCCCC;
    margin-left: 180px;
  }
  .side_content {
    flex: 1;
    background-color: #fff;
    .side_box{
      width: 180px;
      height: 40px;
      background-color: #137f88;
      .logo_img_wrap{
        width: 30px;
        height: 30px;
        border-radius: 100%;
        background-image: url("../assets/images/avatar.jpg");
        background-size: contain;
        float: left;
        margin-top: 5px;
        margin-left: 20px;
        transition: all .2s ease-in-out;
        &:hover{
          transform: translateX(20px) scale(1.2);
          transition: all .2s ease-in-out;
        }
      }
    }
    .side_menu{
      width: 180px;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #12959e;
      a{
        color: #ffffff;
        text-decoration: none;
        line-height: 35px;
        width: 100%;
        display: block;
        text-align: center;
        transition: all .2s ease-in-out;
        &:hover{
          background-color: #1ebfcc;
          transition: all .2s ease-in-out;
        }
      }
      .router-link-active{
        background-color: #1ebfcc;
      }
    }
  }
}
